<template>
  <view class="login-select-wrap" style="background-color: #C6DBFC;height: 100vh">
    <div class="" style="margin: 300rpx auto"><h1>Hi, 很高兴见到你</h1>
      <h2>请问你的身份是？</h2>

      <div class="f ac xc cn mt60r">
        <div class="rds30r" style="width: 70vw;height: 20vw;background-color: #F7F8FE;padding: 30rpx"
             @click="()=>{identity=1;show=true}">
          我是店长
        </div>
        <div class="rds30r mt50r" style="width: 70vw;height: 20vw;background-color: #F7F8FE;padding: 30rpx"
             @click="()=>{identity=2;show=true}">
          我是教练
        </div>
      </div>
    </div>
    <u-picker  keyName="title" :show="show" :columns="columns" @confirm="confirm" @cancel="show=false"></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      columns: [
        [{title: '1号店', id: 1}, {title: '2号店', id: 2}, {title: '3号店', id: 3}]
      ],
      identity: '',//1 店长 2 教练
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.columns[0].push('不在列表请联系管理员')
    })
  },
  methods: {
    confirm(){
      uni.$u.toast(`身份选择成功，请等待${this.identity===1?'管理员':'店长'}审核`)
       uni.setStorageSync('intercept',true);
      uni.$u.toast('演示环境，正在跳转首页')
      setTimeout(()=>{
        uni.redirectTo({
          url: '/pages/index/index'
        })
      },1500)
      this.show = false
    },
    handlePersonRegister() {
      uni.navigateTo({
        url: '/pages/login/person-register'
      })
    },
    handleMerchantRegister() {
      uni.navigateTo({
        url: '/pages/login/merchant-register'
      })
    }
  },
}
</script>

<style scoped lang="scss">
.login-select-wrap {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .login-select-pack {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .content {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      overflow-x: hidden;
      overflow-y: auto;
      position: relative;

      .bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 750rpx;
        height: 100%;
        z-index: 1;
      }

      .main {
        padding-top: calc(44px + 328rpx);
        position: absolute;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
        z-index: 2;

        & > .item:nth-child(1) {
          margin-bottom: 40rpx;
        }

        .item {
          width: 534rpx;
          height: 192rpx;
          border-radius: 26rpx;
        }
      }
    }
  }
}
</style>
